<!-- Dom模板 -->
<template>
  <div :class="classNames">
      <div class="payDetailAlertCon">
        <!-- Dom内容 -->
        <div class="close" v-if="!payAwayFlagHua">
            <i class="iconfont icon-guanbi-01" @click="closePayDetailAlert2();closePayDetailAlert();"></i>
        </div>
        <div class="contents" v-if="!payAwayFlagHua">
            <div class="titles">付款详情</div>
            <div class="prices">￥{{$store.state.yanqq.prices}}</div>
            <div class="payAways">
                <p>支付方式</p>
                <p @click="openPayAway">
                  <span>{{bankCardArr[redIndex]}}</span>
                  <i class="iconfont icon-chevron-thin-right"></i>
                </p>
            </div>
        </div>
        <!-- 确认支付按钮 -->
        <div class="submitOrder" v-if="!payAwayFlagHua">
            <button class="settleButton" @click="openPaySuccess">确认支付</button>
        </div>
        
      <transition name="transHua">
        <div class="payAwayDiv" v-if="payAwayFlag">
          <div class="closePAyAway">
              <i class="iconfont icon-zuojiantou-01" @click="closePayAway" style="font-size: 20px;"></i>
          </div>
              <p class="titles">支付方式</p>
          <div class="payAways">
              <p v-for="(item,index) in bankCardArr" :key="index" :class="redIndex===index?'red':''" @click="redClick(item,index)">
                <span @click="openPayAway">{{item}}</span>
                <i class="iconfont icon-chevron-thin-right"></i>
              </p>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import PaySuccess from '../paySuccess';
import 'animate.css';

export default {
  name: '',
  components:{
      PaySuccess,
  },
  props:["closePayDetailAlert"],
  data() {
    return {
      msg: '测试',
      classNames:"mains animate__animated animate__fadeInBottomRight", // 类名
      payAwayFlag:false, // 支付方式开关
      payAwayFlagHua:false, // 支付方式开关动画
      redIndex: 0, // 选择卡的高亮
      bankCardArr:["余额(**)","浦发银行信用卡(0735)","交通银行信用卡(0635)","招商银行信用卡(0535)","农业银行信用卡(0435)","邮政银行信用卡(0335)","工商银行信用卡(0235)","建设银行信用卡(0135)","光大银行信用卡(0135)"]
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
      
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
      
  },
  // Vue方法定义
  methods: {
      openPaySuccess(){
        this.$router.push("/paySuccess");
      },
      closePayDetailAlert2(){
        this.classNames = "mains animate__animated animate__fadeOutBottomRight";
      },
      // 打开支付方式页
      openPayAway(){
        this.payAwayFlag = true;
      },
      closePayAway(){
        this.payAwayFlag = false;
      },
      redClick(item,index){
        this.redIndex = index;
        setTimeout(() => {
          this.payAwayFlag = false;
        }, 50);
      }
  }
}
</script>

<style scoped>
/* @import url(''); 引入css类 */
@import url("../../fonts/iconfont.css");

.payDetailAlertCon{
    overflow-x: hidden !important;
    position: fixed;
    top: 20%;
    left: 14%;
    width: 280px;
    min-height: 288px;
    padding: 14px;
    border-radius: 10px;
    background-color: #fff;
}
.payAwayDiv{
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
    height: 288px;
    padding: 14px;
    border-radius: 10px;
    background-color: #fff;
}
.payAwayDiv{
  transition: all 0.5s ease-in-out;
  z-index: 5;
}
.payAwayDiv .payAways{
    width: 100%;
    display: flex;
    flex-flow: column;
    padding: 20px 30px;
    justify-content: center;
    position: absolute;
    padding-top: 150px;
    /* max-height: 234px; */
    height: calc(100% - 66px);
    overflow-y: auto;
}
.payAwayDiv .payAways p{
  padding: 0 0 16px;
}
.titles{
  text-align: center;
  font-weight: bold;
}
.closePAyAway{
  position: absolute;
}

.close{
    padding: 0 0 10px;
}

.contents{
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}
.contents>div{
    padding: 12px 0;
}
.payAways{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.submitOrder{
    text-align: center;
}
.settleButton{
    color: #fff;
    width: 74%;
    height: 44px;
    outline: none;
    border: 0;
    margin: 10px 0;
    border-radius: 4px;
    background-color: #e44a4a;
}
.prices{
    font-size: 30px;
}


/* 页面进入离开的动画 */
.transHua-enter {
  transform: translateX(100%);
}
.transHua-leave-to {
  transform: translateX(100%);
}

/* 公共样式 */
.red{
  color: red;
}

</style>